<template>
	<view  :class="{'show':showModes}" @touchmove.stop.prevent class="main">
		<view class="contens ">
			<view class="contens_main p30">
				<p class="title bb">
					{{title}}
				</p>
				<input type="text" maxlength="11" v-model="mobile" :placeholder="plTxt" class="models-input"/>
				<u-button @tap="success()" :ripple="true" shape="circle" type="success" class="mobile-btn">
					确定
				</u-button>
			</view> 
			<image class="off" src="../../static/image/modelsoff.png" @tap="hide()" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:['title','plTxt'],
		data() {
			return {
				showModes: false,
				mobile:""
			}
		}, 
		methods: {
			success(){
				this.showModes = false
				this.$emit('success',this.mobile)
			},
			hide(){
				this.showModes = false
			},
			show(){
				this.showModes = true
			},
			finish(){
				this.showModes = false
				this.$emit('finish')
			}
		}
	}
</script>

<style  scoped>
	@import 'index.css';
	.models-input{
		height: 40px;
		margin-top: 25px;
		margin-bottom: 20px;
		text-align: center;
		border: #EEEEEE solid 1px;
		border-radius: 8px;
		width: 80%;
		margin-left: 10%;
		font-size: 30rpx;
	}
	.mobile-btn{
		margin-top: 20px;
		margin-bottom: 20rpx;
	}
</style>
